/*
 * @Author: Choisaaaa
 * @Date: 2018/5/3  22:57
 * 商品种类下拉框
 */

import React  from 'react';
import MUtil  from 'util/mm.jsx'
import ProductCategory from 'service/product-category-service.jsx'
import "./category-selector.scss"

const _category = new ProductCategory();
const _mm = new MUtil();

class CategorySelect extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            firstCategoryList: [],
            firstCategoryId : 0 ,
            secondCategoryList : [],
            secondCategoryLd : 0
        }
    }
    componentWillMount(){//组件将要加载
        this.mounted = true;
    }
    componentWillUnmount(){//组件销毁
        this.mounted = false;
    }
    componentDidMount(){
        this.loadFirstCategoryList();
    }
    componentWillReceiveProps(nextProps){//父组件更新子组件
        let categoryIdChange  = this.props.categoryId !== nextProps.categoryId;
        let parentCategoryIdChange  = this.props.parentCategoryId !== nextProps.parentCategoryId;
        if(!parentCategoryIdChange && !categoryIdChange) {//数据没有发生改变
            return;
        }
        if(nextProps.parentCategoryId === 0){//只有一级种类
            this.setState({
                firstCategoryId : nextProps.categoryId,
                secondCategoryLd : 0
            });
        }
        else{
            this.setState({
                firstCategoryId : nextProps.parentCategoryId,
                secondCategoryLd : nextProps.categoryId
            },()=>{
                parentCategoryIdChange && this.loadSecondCategory();
            });
        }

    }
    loadFirstCategoryList(){//渲染一级商品种类
        _category.getCategoryList().then(res =>{
            if(this.mounted){
                this.setState({
                    firstCategoryList : res
                });
            }

        },err =>{
            _mm.errorTips(err);
        });
    }
    onFirstCategoryChange(e){//选择一级种类
        if(this.props.readOnly){//详情页面中设置只可读，不必更改value值
            return;
        }
        let newValue = e.target.value || 0 ;
        this.setState({
            firstCategoryId : newValue,
            secondCategoryList : [],
            secondCategoryId : 0
        },()=>{
            //更新二级种类
            this.loadSecondCategory();
            this.onPropsCategoryChange();
        });
    }
    loadSecondCategory(){//渲染二级商品种类
        _category.getCategoryList(this.state.firstCategoryId).then(res =>{
            this.setState({
                secondCategoryList : res
            });
        },err =>{
            _mm.errorTips(err);
        });
    }
    onSecondCategoryChange(e){//选择二级种类
        if(this.props.readOnly){//详情页面中设置只可读，不必更改value值
            return;
        }
        let newValue = e.target.value || 0 ;
        this.setState({
            secondCategoryId : newValue
        },()=>{
            this.onPropsCategoryChange();
        });
    }
    onPropsCategoryChange(){//传给父组件选中的结果
        //判断父组件中是否存在回调函数的标记
        let categoryChangeable = typeof this.props.onCategoryChange === "function";
        if(this.state.secondCategoryId){//如果是有二级品类
            categoryChangeable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId);
        }else if(this.state.firstCategoryId){//如果只有一级品类
            categoryChangeable && this.props.onCategoryChange(this.state.firstCategoryId,0);
        }

    }
    render(){
        return (
            <div className="col-md-10">
                <select className="form-control cate-select"
                        readOnly={this.props.readOnly}
                        value={this.state.firstCategoryId}
                        onChange={(e) => this.onFirstCategoryChange(e)}>
                    <option value="">请选择一别分类</option>
                    {
                        this.state.firstCategoryList.map((category,index) =>
                            <option value={category.id} key={index}>{category.productCategoryName}</option>
                        )
                    }
                </select>
                <select className="form-control cate-select"
                        readOnly={this.props.readOnly}
                        value={this.state.secondCategoryLd}
                        onChange={(e) => this.onSecondCategoryChange(e)}>
                    <option value="">请选择二级分类</option>
                    {
                        this.state.secondCategoryList.map((category,index) =>
                            <option value={category.id} key={index}>{category.productCategoryName}</option>
                        )
                    }
                </select>
            </div>
        );
    }
}

export default CategorySelect;